<template>
  <view class="container">
    <view class="content">
      <van-tabs v-model="active" line-width="48rpx">
        <van-tab title="全部"></van-tab>
        <van-tab title="未提交"></van-tab>
        <van-tab title="已批改"></van-tab>
        <van-tab title="未批改"></van-tab>
      </van-tabs>
      <scroll-view
        v-if="list.length > 0"
        :style="{ height: h }"
        @scrolltolower="lowerBottom"
        scroll-y="true"
        refresher-enabled="true"
        :refresher-triggered="triggered"
        :refresher-threshold="100"
        @refresherpulling="onPulling"
        @refresherrefresh="onRefresh"
        @refresherrestore="onRestore"
        @refresherabort="onAbort"
      >
        <view class="checkItem" v-for="(item, index) in list" :key="index">
          <view class="item_l">
            <view class="itemName"> {{ item.title }} </view>
            <view class="itemTag">
              <van-tag
                color="#F0F0FA"
                text-color="#666666"
                size="medium"
                v-if="item.passing === 0 || item.passing === null"
                >未提交</van-tag
              >
              <van-tag
                color="#fdf4e9"
                text-color="#EF7D00"
                size="medium"
                v-else-if="item.passing === 2"
                >未批改</van-tag
              >
              <van-tag color="#ebfbe9" text-color="#43DA2B" size="medium" v-else
                >已批改</van-tag
              >
            </view>
          </view>
          <view class="item_r">
            <view
              @click="to(item)"
              :class="[
                'itemBtn',
                item.passing === 1 || item.passing === -1 ? 'Corrected' : '',
              ]"
            >
              去看看
            </view>
          </view>
        </view>
        <view class="more">{{ canLoading ? "加载更多" : "到底了~" }}</view>
      </scroll-view>
      <view v-else :style="{ height: h }">
        <view style="width: 100%; height: 50px"></view>
        <van-empty description="暂无抽查记录" />
      </view>
    </view>
  </view>
</template>

<script>
import { examSpotChecklist } from "@/common/api/testCheck";
export default {
  data() {
    return {
      active: 0,
      pageModel: {
        status: "",
        userId: "",
        pageNum: 1,
        pageSize: 10,
      },
      list: [],
      safeAreaInsetsTop: "",
      navigationBarHeight: "",
      h: "",
      triggered: true,
      _freshing: false,
      canLoading: false,
    };
  },
  watch: {
    active(e) {
      if (e.detail.title == "全部") {
        this.pageModel.status = "";
      } else if (e.detail.title == "未提交") {
        this.pageModel.status = 0;
      } else if (e.detail.title == "已批改") {
        this.pageModel.status = 1;
      } else if (e.detail.title == "未批改") {
        this.pageModel.status = 2;
      }
    },
  },
  onShow() {
    this.active = 0;
    this.getList("refresh");
    this.safeAreaInsetsTop = getApp().globalData.$safeAreaInsetsTop;
    this.navigationBarHeight = getApp().globalData.$navigationBarHeight;
    this.h = `calc(100vh - 44px)`;
  },
  methods: {
    to(item) {
      // 如果未提交则跳转考试页面
      if (item.passing === 0 || item.passing === null) {
        uni.navigateTo({
          url: `/pages/selectiCourse/startExam?examId=${item.examId}&type=testCheck&taskName=${item.title}`,
        });
      }
      // 如果是待批改 或者已批改则跳到结果页面
      else {
        uni.navigateTo({
          url: `/pages/selectiCourse/examResult?id=${item.examId}&paperId=${item.examPaperId}&type=testCheck&taskName=${item.title}`,
        });
      }
    },
    async getList(type) {
      if (type == "refresh") {
        uni.showLoading({
          mask: true,
          title: "加载中",
        });
        this.pageModel.pageNum = 1;
      }
      this.pageModel.userId = uni.getStorageSync("userId");
      let res = await examSpotChecklist(this.pageModel);
      this.list = type == "refresh" ? res.rows : [...this.list, ...res.rows];
      this.canLoading = this.list.length < res.total ? true : false;
    },
    lowerBottom() {
      if (this.canLoading) {
        this.pageModel.pageNum = this.pageModel.pageNum + 1;
        this.getList();
      }
    },
    onPulling(e) {
      console.log("onpulling", e);
    },
    async onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      await this.getList("refresh");
      this.triggered = false;
      this._freshing = false;
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
      console.log("onRestore");
    },
    onAbort() {
      console.log("onAbort");
    },
  },
};
</script>

<style lang="scss" scoped>
.more {
  padding-top: 20rpx;
  padding-bottom: env(safe-area-inset-bottom);

  text-align: center;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
::v-deep .van-tabs__line {
  background: linear-gradient(90deg, #ff4d03 0%, #ff9a00 100%);
}

::v-deep .van-tab--active .van-ellipsis {
  font-weight: bold;
  font-size: 32rpx;
}

::v-deep .van-ellipsis {
  font-size: 28rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.container {
  width: 750rpx;
  background: #f6f7f8;

  .content {
    width: 100%;

    .checkItem {
      // width: 100%;
      height: 152rpx;
      background: #ffffff;
      border-radius: 16rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32rpx;
      box-sizing: border-pxbox;
      margin-top: 20rpx;

      .itemTag {
        margin-top: 18rpx;
      }

      .itemBtn {
        width: 160rpx;
        height: 56rpx;
        background: #ffffff;
        border-radius: 31rpx;
        border: 2rpx solid rgba(255, 72, 0, 0.54);
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #f85415;
        line-height: 56rpx;
        text-align: center;
      }

      .itemBtn.Corrected {
        border: 2rpx solid #e5e5e5;
        color: #333333;
      }
    }
  }
}
</style>